<template>
	<el-select class="el-form-item" v-model="valueAry" :remote-method="remoteMethod" filterable remote :disabled="disabled" :loading="loading" clearable multiple :placeholder="placeholder" @change="handleSelectChange" @clear="handleClear">
		<template v-if="dataType">
			<el-option v-for="item in dataList" :key="item.value" :label="labelKey == 'label' ? item.label : item.value" :value="valueKey == 'value' ? item.value : valueKey == 'item' ? item : item.label" />
		</template>
		<el-option v-else v-for="(item, index) in dataList" :key="item + index" :label="item" :value="item" />
		<el-pagination small layout="prev, pager, next" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" :total="dataCount" @current-change="handleCurrentChange" />
	</el-select>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
import global from '@/utils/global'
export default defineComponent({
	name: 'SelectMultiple',
	props: {
		modelValue: {
			type: Array,
			default: function () {
				return []
			},
		},
		url: {
			// 请求Url
			type: String,
		},
		placeholder: {
			// placeholder 内容
			type: String,
			default: '请输入',
		},
		valueKey: {
			type: String,
			default: 'value',
		},
		labelKey: {
			type: String,
			default: 'label',
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		dataType: {
			//默认数据是一个数据格式 true=>[{ lable:'1',value: 1}]  false:为一个数组 [1,2,3,4]
			type: Boolean,
			default: true,
		},
		paramsQuery: {
			type: Object,
			default: function () {
				return {}
			},
		},
		params: {
			type: Array,
			default: function () {
				return []
			},
		},
		initReqStatus: {
			//是否初始化请求
			type: Boolean,
			default: false,
		},
		defaultValue: {
			// 是否显示默认值
			type: String,
			default: '',
		},
	},
	emits: ['getDefaultValue', 'update:modelValue', 'handleClear'],
	setup(props, context) {
		const state = reactive({
			valueAry: [],
			dataList: [],
			searchForm: {
				pageNum: 1,
				pageSize: 10,
				field: '',
			},
			dataCount: 0,
			loading: false,
		})
		onMounted(() => {
			if (props.initReqStatus) {
				state.searchForm.field = ''
				state.valueAry = props.modelValue
				handleSearch()
			}
		})
		watch(
			() => props.modelValue,
			value => {
				state.valueAry = value
			}
		)
		watch(
			() => props.paramsQuery,
			val => {
				if (Object.values(val).length > 0 && Object.values(val)[0]) {
					handleSearch()
				}
			}
		)
		const remoteMethod = query => {
			if (query) {
				state.searchForm.field = query
				getTableList()
			} else {
				state.dataList = []
			}
		}
		const handleClear = () => {
			state.searchForm.field = ''
		}

		const getTableList = () => {
			state.loading = true
			global
				.$fetchPostData(props.url, {
					...state.searchForm,
					...props.paramsQuery,
				})
				.then(data => {
					if (data.code == 200) {
						state.loading = false
						if (data.data.rows.length > 0) {
							state.dataCount = Number(data.data.total)
							if (props.params.length > 0) {
								let arr = []
								if (props.valueKey == 'item') {
									arr = props.params
								} else {
									props.params.forEach(item => {
										arr.push({ label: item.deptName, value: item.deptId })
									})
								}
								state.dataList = handleArr([...data.data.rows, ...arr])
							} else {
								state.dataList = data.data.rows
							}
							if (state.searchForm.pageNum == 1 && props.initStatus) {
								state.searchForm.field = data.data.rows[0].label
								context.emit('getDefaultValue', data.data.rows[0])
							}
							if (state.searchForm.pageNum == 1 && props.defaultValue) {
								state.searchForm.field = props.defaultValue
							}
						} else {
							state.dataCount = 0
							state.dataList = []
						}
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
		}
		const handleArr = arr => {
			const newArr = []
			for (let i = 0; i < arr.length; i++) {
				let flag = true
				for (let j = 0; j < newArr.length; j++) {
					if (arr[i].value == newArr[j].value) {
						flag = false
						break
					}
				}
				if (flag) {
					newArr.push(arr[i])
				}
			}
			return newArr
		}
		const handleSelectChange = e => {
			context.emit('update:modelValue', e)
			if (props.dataType) {
				const resAry = state.dataList.filter(item => item.value == e)
				if (resAry.length > 0) {
					context.emit('getDefaultValue', resAry[0])
				}
			}
		}
		const handleCurrentChange = val => {
			state.searchForm.pageNum = val
			getTableList()
		}
		const handleSearch = () => {
			state.searchForm.pageNum = 1
			getTableList()
		}
		const resetSelectData = () => {
			state.searchForm.field = ''
			handleSearch()
		}
		return {
			...toRefs(state),
			remoteMethod,
			handleSelectChange,
			handleCurrentChange,
			handleSearch,
			handleClear,
			resetSelectData,
		}
	},
})
</script>
<style lang="scss" scoped></style>
